<template>
	<div id="gantt_chart" v-if="state.tasks.data" style="min-height: 300px"></div>
</template>

<script setup>
import { gantt } from "dhtmlx-gantt";
import { ElIcon } from "element-plus";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import {
	onMounted,
	reactive,
	watch,
	onUnmounted,
	onBeforeUnmount,
} from "vue";
const props = defineProps({
	ganttList: {
		type: Array,
		default: () => {
			return [{ start_date: "2020-05-01" }, { start_date: "2020-05-09" }];
		},
	},
	type: {
		type: String,
		default: "",
	},
});
const state = reactive({
	// ganttList: [{ start_date: '2020-05-01' }, { start_date: '2020-05-09' }],
	tasks: {
		data: [],
	},
});

//初始化
const init = () => {
	gantt.config.scale_unit = "month"; //按月显示
	gantt.config.date_scale = "%Y-%m"; //设置时间刻度的格式（X轴） 多个尺度
	gantt.config.readonly = true;
	// gantt.config.scale_height = 38; //设置时间刻度的高度和网格的标题

	gantt.config.subscales = [{ unit: "day", step: 1, date: "%j日" }]; //指定第二个时间刻度

	gantt.init("gantt_chart");

	gantt.config.autofit = true;

	gantt.config.columns = [
		{
			name: "taskName",
			label: props.type == "项目管理" ? "项目实施阶段" : "招标项目任务名称",
			// tree: true,
			align: "center",
			width: "400",
		},
		{
			name: "nodeName",
			label: props.type == "项目管理" ? "招标任务" : "实施流程节点",
			align: "center",
			width: "400",
		},
		{
			name: "duration",
			label: "工期",
			align: "center",
		},
	];
	gantt.config.layout = {
		css: "gantt_container",
		cols: [
			{
				width: 400,
				min_width: 300,
				rows: [
					{
						view: "grid",
						scrollX: "gridScroll",
						scrollable: true,
						scrollY: "scrollVer",
					},
					{ view: "scrollbar", id: "gridScroll", group: "horizontal" },
				],
			},
			{ resizer: true, width: 1 },
			{
				rows: [
					{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
					{ view: "scrollbar", id: "scrollHor", group: "horizontal" },
				],
			},
			{ view: "scrollbar", id: "scrollVer" },
		],
	};
	state.tasks.data = props.ganttList;
	gantt.config.tasks = state.tasks;
	gantt.parse(state.tasks);

	gantt.render();
	if (!state.tasks.data) {
		gantt.clearAll();
	}
};
onUnmounted(() => {
	gantt.clearAll();
});

watch(props.ganttList, (value) => {
	console.log("=====_____");
	console.log(value);
});

onMounted(() => {
	// 先销毁
	gantt.clearAll();
	init();
});
</script>
<style lang="scss" scoped>
:deep(.gantt_container){
  .gantt_task_line {
    background-color: #ff7b50;
    border: 0px;
  }
  
  .gantt_file {
    display: none;
  }
  .gantt_grid_scale {
    line-height: 48px !important;
  }
  .gantt_task_scale,
  .gantt_grid_scale {
    height: 48px !important;
  }
}
</style>
